import { ResultPage, List } from 'antd-mobile'
import UserInfo from './components/UserInfo'
import {
  UnorderedListOutline,
  PayCircleOutline,
  SetOutline
} from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'

function Me() {
  const nav = useNavigate()

  return (
    <div>
      <ResultPage
        status=""
        title={<UserInfo />}
        description=""
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <List style={{ '--border-bottom': 'none', '--border-top': 'none' }}>
            <List.Item
              prefix={<UnorderedListOutline />}
              onClick={() => nav('/psg-list')}
            >
              常用乘客
            </List.Item>
            <List.Item
              prefix={<PayCircleOutline />}
              onClick={() => nav('/order-list')}
            >
              我的订单
            </List.Item>
            <List.Item
              prefix={<SetOutline />}
              onClick={() => nav('/chat')}
            >
              客服中心
            </List.Item>
          </List>
        </ResultPage.Card>
      </ResultPage>
    </div>
  )
}

export default Me
